<script lang="ts" setup>
import Maximize from '@/layouts/components/Main/Maximize.vue'
import Tabs from '@/layouts/components/Tabs/index.vue'
import {computed, onBeforeUnmount, provide, ref} from 'vue'
import useRouteStore from '@/store/route.ts'
import useThemeStore from '@/store/theme.ts'

const routeStore = useRouteStore()
const themeStore = useThemeStore()
const isRouterShow = ref(true) // 刷新当前页面
const isCollapse = computed(() => themeStore.isCollapse)

const refreshCurrentPage = (val: boolean) => {
	isRouterShow.value = val
}
provide('refresh', refreshCurrentPage)

// 监听窗口大小变化，折叠侧边栏
const screenWidth = ref<number>(0)
const listeningWindow = () => {
	screenWidth.value = document.body.clientWidth
	if (!isCollapse.value && screenWidth.value < 1200) themeStore.setCollapse(true)
	if (isCollapse.value && screenWidth.value > 1200) themeStore.setCollapse(false)
}
window.addEventListener('resize', listeningWindow)
onBeforeUnmount(() => {
	window.removeEventListener('resize', listeningWindow)
})
</script>

<template>
	<Maximize v-if="themeStore.fullScreen"/>
	<Tabs v-if="themeStore.tabs"/>
	<el-main>
		<router-view v-slot="{Component, route}">
			<transition appear mode="out-in" name="fade-transform">
				<div class="components">
					<keep-alive :include="routeStore.keepAliveName">
						<component :is="Component" v-if="isRouterShow" :key="route.path"/>
					</keep-alive>
				</div>
			</transition>
		</router-view>
	</el-main>
</template>

<style lang="scss" scoped>
.el-main {
	box-sizing: border-box;
	padding: 10px 12px;
	overflow-x: hidden;
	background-color: #f0f2f5;

	&::-webkit-scrollbar {
		background-color: #f0f2f5;
	}
}
</style>
